<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>课室信息添加</h3>
    </div>
    <hr />
    <div id="classroom_ruleForm" style="margin:auto;text-align:center;width:80%">
      <el-form
        :model="classroom_ruleForm"
        status-icon
        :rules="rules"
        ref="classroom_ruleForm"
        inline-message
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <span class="title">课室名称：</span>
          <el-input v-model="classroom_ruleForm.name" style="width: 300px; text-align: left;"></el-input>
        </el-form-item>
        <el-form-item prop="englishName">
          <span class="title">英文名称：</span>
          <el-input
            v-model="classroom_ruleForm.englishName"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="campus">
          <span class="title">校区：</span>
          <el-button type="text" @click.native="openCampusList = true">
            <span v-if="classroom_ruleForm.campus">{{classroom_ruleForm.campus.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="area">
          <span class="title">功能区：</span>
          <el-button type="text" @click.native="openAreaList = true">
            <span v-if="classroom_ruleForm.area">{{classroom_ruleForm.area.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="classroomSeatNumber">
          <span class="title">座位数：</span>
          <el-input
            v-model="classroom_ruleForm.classroomSeatNumber"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="classroomRowNumber">
          <span class="title">行数：</span>
          <el-input
            v-model="classroom_ruleForm.classroomRowNumber"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="classroomColumnNumber">
          <span class="title">列数：</span>
          <el-input
            v-model="classroom_ruleForm.classroomColumnNumber"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="maxCapcity">
          <span class="title">最大容纳人数：</span>
          <el-input v-model="classroom_ruleForm.maxCapcity" style="width: 300px; text-align: left;"></el-input>
        </el-form-item>
        <el-form-item prop="currentCapcity">
          <span class="title">当前容纳人数：</span>
          <el-input
            v-model="classroom_ruleForm.currentCapcity"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fieldType">
          <span class="title">场地类型：</span>
          <el-button type="text" @click.native="openFieldTypeList = true">
            <span v-if="classroom_ruleForm.fieldType">{{classroom_ruleForm.fieldType.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item>
          <span style="width:80%;text-align:center;">
            <el-button type="primary" @click="submitForm('classroom_ruleForm')">提交</el-button>
            <el-button type="primary" @click="resetForm('classroom_ruleForm')">重置</el-button>
          </span>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 校区筛选 -->
      <el-dialog title="选择校区" :visible.sync="openCampusList">
        <el-input placeholder="请输入关键字" v-model="campusKeyword">
          <template slot="prepend">校区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCampusByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="campusSelect">
          <el-radio
            v-for="(campus, index) in campusList"
            :key="'campus' + index"
            :label="campus"
          >{{ campus.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="campusSelect = '',classroom_ruleForm.campus">清 空</el-button>
          <el-button type="primary" @click="campusSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 功能区筛选 -->
      <el-dialog title="选择功能区" :visible.sync="openAreaList">
        <el-input placeholder="请输入关键字" v-model="areaKeyword">
          <template slot="prepend">功能区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getAreaByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="areaSelect">
          <el-radio
            v-for="(area, index) in areaList"
            :key="'area' + index"
            :label="area"
          >{{ area.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="areaSelect = '',classroom_ruleForm.area=''">清 空</el-button>
          <el-button type="primary" @click="areaSelected">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 场地类型筛选 -->
      <el-dialog title="选择场地类型" :visible.sync="openFieldTypeList">
        <el-input placeholder="请输入关键字" v-model="fieldKeyword">
          <template slot="prepend">场地类型名</template>
          <el-button slot="append" icon="el-icon-search" @click="getFieldByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="fieldSelect">
          <el-radio
            v-for="(field, index) in fieldList"
            :key="'field' + index"
            :label="field"
          >{{ field.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="fieldSelect = '',classroom_ruleForm.fieldType=''">清 空</el-button>
          <el-button type="primary" @click="fieldSelected">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "add",
  data() {
    //表单验证规则
    var checkClassroomSeatNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("座位数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于1"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkClassroomRowNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("行数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于1"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkClassroomColumnNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("列数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于1"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkMaxCapcity = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("最大容纳数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于1"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkCurrentCapcity = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("当前容纳数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 1) {
            callback(new Error("必须大于1"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      openCampusList: false, //校区筛选显示
      campusKeyword: "", //校区搜索关键词
      campusSelect: "", //校区选择
      campusList: [], //校区列表

      openAreaList: false, //功能区筛选显示
      areaKeyword: "", //功能区搜索关键词
      areaSelect: "", //功能区选择
      areaList: [], //功能区列表

      openFieldTypeList: false, //场地类型筛选显示
      fieldKeyword: "", //场地类型关键词
      fieldSelect: "", //场地类型选择
      fieldList: [], //场地类型列表

      //表单数据
      classroom_ruleForm: {
        id: "",
        name: "", //课室名称
        englishName: "", //英文名称
        campus: "", //校区
        area: "", //功能区
        classroomSeatNumber: 0, //座位数
        classroomRowNumber: 0, //行数
        classroomColumnNumber: 0, //列数
        maxCapcity: 0, //最大容纳人数
        currentCapcity: 0, //当前容纳人数
        fieldType: "", //场地类型
      },
      rules: {
        name: [{ required: true, message: "请输入课室名称", trigger: "blur" }],
        englishName: [
          { required: true, message: "请输入英文名称", trigger: "blur" },
        ],
        campus: [{ required: true, message: "请选择校区", trigger: "submit" }],
        area: [{ required: true, message: "请选择功能区", trigger: "submit" }],
        classroomSeatNumber: [
          { validator: checkClassroomSeatNumber, trigger: "blur" },
        ],
        classroomRowNumber: [
          { validator: checkClassroomRowNumber, trigger: "blur" },
        ],
        classroomColumnNumber: [
          { validator: checkClassroomColumnNumber, trigger: "blur" },
        ],
        maxCapcity: [{ validator: checkMaxCapcity, trigger: "blur" }],
        currentCapcity: [{ validator: checkCurrentCapcity, trigger: "blur" }],
        fieldType: [
          { required: true, message: "请选择场地类型", trigger: "submit" },
        ],
      },
    };
  },
  created() {
    //页面加载前获取校区列表
    this.getCampusList();
    //页面加载前获取功能区列表
    this.getFunctionAreaList();
    //页面加载前获取场地类型列表
    this.getFieldTypeList();
  },
  methods: {
    /**===============确定选择的数据============================================ */
    //确定选择的校区
    campusSelected() {
      if (this.campusSelect) {
        this.classroom_ruleForm.campus = this.campusSelect;
      }
      this.openCampusList = false;
    },

    //确定选择的功能区
    areaSelected() {
      if (this.areaSelect) {
        this.classroom_ruleForm.area = this.areaSelect;
      }
      this.openAreaList = false;
    },

    //确定选择的场地
    fieldSelected() {
      if (this.fieldSelect) {
        this.classroom_ruleForm.fieldType = this.fieldSelect;
      }
      this.openFieldTypeList = false;
    },
    /**==========搜索================================= */
    //根据关键词搜索校区
    getCampusByKeyword() {},
    //根据关键词功能区
    getAreaByKeyword() {},
    //根据关键词搜索场地类型
    getFieldByKeyword() {},
    /**===============获取列表数据======================== */
    //获取校区列表
    getCampusList() {
      this.campusList = [
        { id: "1", name: "主校区" },
        { id: "2", name: "星湖校区" },
      ];
    },

    //获取功能区列表
    getFunctionAreaList() {
      this.areaList = [
        { id: "1", name: "第一教学楼" },
        { id: "2", name: "第二教学楼" },
        { id: "3", name: "第三教学楼" },
        { id: "4", name: "美术大楼" },
        { id: "5", name: "中巴科技园" },
      ];
    },

    //获取场地类型列表
    getFieldTypeList() {
      this.fieldList = [
        { id: "1", name: "传统教室" },
        { id: "2", name: "多媒体教室" },
        { id: "3", name: "实验室" },
      ];
    },
    /**==========按钮事件============================== */
    //课室表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },

    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
#container {
  width: 80%;
  margin: auto;
  font-size: 20px;
}
.el-form-item {
  height: 50px;
  line-height: 50px;
}
.title {
  display: inline-block;
  width: 150px;
  font-size: 20px;
  text-align: right;
}
.el-button span {
  display: inline-block;
  font-size: 20px;
  width: 300px;
  text-align: left;
}
</style>
